<template>
    <div>
      <div style="margin-bottom: 20px;">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="query.userName" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="届数">
            <el-input v-model="query.edition" placeholder="请输入届数" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
  
          <div>
            <el-button type="primary" @click="add">添加理事会成员</el-button>
          </div>
        </el-form>
      </div>
  
  
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="edition" label="届数" />
        <el-table-column prop="unitPosition" label="任职单位职务与职称" min-width="120" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="avatar" label="头像">
          <template #default="{ row }">
            <img @click="previewAvatar(row.avatar)" :src="imgUrl(row.avatar)" class="avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="workUnit" label="工作单位" min-width="120" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '可用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div style="margin-top: 20px;">
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
        />
      </div>
  
  
  
      <association-council-form ref="councilForm" @refresh="refresh" />
    </div>
  </template>
  
  <script setup>
  // 分页相关
  import {computed, ref, useTemplateRef} from "vue";
  import {getAssociationCouncil,deleteAssociationCouncil} from "@/api/associationCouncil.js";
  import AssociationCouncilForm from "./AssociationCouncilForm.vue";
  import {ElMessage, ElMessageBox} from "element-plus";
  import {confirm} from '../../../api/common/common'
  
  const pageNo = ref(1)
  const pageSize = ref(5)
  const total = ref(0)
  let query = ref({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    userName:'',
    edition:'',
  })
  function handleCurrentChange() {
    getData()
  }
  
  const tableData = ref([])
  
  
  // 获取表格数据
  async function getData(){
    // console.log("query.value",query.value)
    query.value.pageNo = pageNo.value
    query.value.pageSize = pageSize.value
    console.log("query.value",query.value)
    let result = await getAssociationCouncil(query.value)
    tableData.value=result.data.list
    total.value=result.data.total
  }
  
  let councilForm = useTemplateRef('councilForm')
  
  // 添加
  function add(){
    // 拿form子组件实例,调用这个实例的show方法
    councilForm.value.add()
  }
  // 编辑
  function edit(row){
    councilForm.value.edit(row)
  }
  // 通知更新
  function refresh(){
    getData()
  }
  //删除
  async function del(row){
    try {
      let flag = await confirm("确认要删除吗?")
      if (flag){
        let result = await deleteAssociationCouncil(row.id)
        ElMessage.success(result.data)
        getData()
      }
    } catch (e) {
      console.log(e)
      ElMessage.error(e.message)
    }
  }
  
  let imgUrl = computed( () =>{
    return v =>{
      if (v.startsWith('http://') || v.startsWith('https://')){
        return v
      }
      return "/api/common/download/"+ v
    }
  })
  
  //预览图片
  function previewAvatar(avatarUrl){
    if (!(avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://'))){
      avatarUrl = "/api/common/download/"+avatarUrl
    }
  
    // avatarUrl = (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) ? avatarUrl : 'http://localhost:8080/rbac/common/download/' + avatarUrl;
    ElMessageBox.alert(
        `<img src="${avatarUrl}" style="max-width: 100%; max-height: 400px;" />`,
        '头像预览',
        {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          showCancelButton: true,
          cancelButtonText: '关闭',
        }
    );
  }
  
  
  getData()
  </script>
  
  <style scoped>
  .avatar{
    width: 50px;
    height: 50px;
    display: block;
  }
  </style>
  